<template>
	<div class="header_bar_outer" :class="{'isios':isIos && !isIosX,'isiosX':isIos && isIosX}">
		<div class="header_bar" :class="{'white':background == 'white' || type == 99,'header_bar2':type == 2,'header_bar3':type==3,'imgs_preview_bar':type==88,'header_bar_no':type==4}" :style="'opacity:'+this.opacity+';'">
			<div class="header_left_tab" @click="clickReturn" v-if="showReturn">
				<img src="../assets/imgs/header/header_return_icon.png" class="return_icon" v-if="background == 'white'|| type == 99||type==1">
				<img src="../assets/imgs/header/header_return_icon2.png" class="return_icon" v-else>
			</div>
			<span @click="vconsole" class="title-color" :class="{'titleColor':titleColor||type == 2||type == 3}" v-if="type != 99">{{title}}</span>
			<form class="search_bar" v-if="type == 99" action="javascript:return true;">  
			    <!-- <div class="search_bar" v-if="type == 99"> -->
			    	<img src="../assets/imgs/header/search_icon.png" class="search_icon">
			    	<input v-model="keyword" type="search" placeholder="搜索你需要的商品热门关键词" ref="searchInput" @keydown="onInputKeyDown">
			    	<img src="../assets/imgs/header/close_icon.png" class="close_icon" v-show="keyword" @click="keyword = ''">
			    <!-- </div> -->
			</form>
			<slot name="title"></slot>
			<div class="right_area_520">
				<slot name="right"></slot>
			</div>
			<slot name="extend"></slot>
		</div>
	</div>
</template>

<script>
	import util from '../libs/utils.js'
	import native from '../libs/native/index';
	import { mapState,mapActions } from 'vuex'
	export default {
		data() {
			return {
				isIos: false,
				isIosX: false,
				num:0,
				keyword:'',
				whiteList:[
					'18566745427','15258872520','15210498058',
					'18110808568','15396202439'
				],//白名单显示日志
			};
		},
		props:{
			title:{
				type: String,
				default: ''
			},
			showReturn: {
				type: Boolean,
				default: true
			},
			returnRouterName: {
				type: String,
				required: false
			},
			slideIn: {//是否关闭webview
				type: String,
				default: '0'
			},
			type: {
				type: Number, // 99 搜索条  88 图片预览头部
				default: 1
			},
			interceptReturn: {
				type: Boolean,
				default: false
			},
			titleColor: {
				type: String,
				default: ''
			},
			background: {
				type: String,
				default: ''
			},
			opacity: {
				type: String,
				default: ''
			},
		},
		computed:{
			...mapState({
				headerHeight: state => state.headerHeight,
				osType: state => state.osType,
			})
		},
		mounted() {
			this.keyword = this.$route.query.keyword || '';
			if(this.$store.state.deviceType == 1){
				this.isIos = false;
				this.isIosX = false;
			}else if(this.$store.state.deviceType == 0){
				// 判断是ios
				this.isIos = true;
				if(/iphone/gi.test(navigator.userAgent) && ((screen.height == 812 && screen.width == 375) || (screen.height == 896 && screen.width == 414))){
					// 判断是不是X
					this.isIosX = true;
				};
			};
			if(!this.osType || !this.headerHeight){
				if(this.isIosX){
					this.setHeaderHeight(1.64);
					this.setOsType('ix');
				}else if(this.isIos){
					this.setHeaderHeight(1.16);
					this.setOsType('i');
				}else{
					this.setHeaderHeight(.88);
					this.setOsType('a');
				}
			};
		},
		methods:{
			...mapActions(['setHeaderHeight','setOsType']),
			clickReturn() {
				if(this.$route.query.slideIn&&this.$route.query.slideIn!='0'||this.slideIn&&this.slideIn!='0'){
					native.closeWebPage();
					return;
				}
				if (this.interceptReturn) {
					this.$emit('return');
				} else {
					this.$router.go(-1);
				}
			},
			vconsole() {
				console.log(this.$store.state.user.userInfo)
				if (location.host != "h5.xianchaoshop.com"|| 
				(this.$store.state.user.userInfo&&this.$store.state.user.userInfo.phone&&this.whiteList.indexOf(this.$store.state.user.userInfo.phone)!=-1 )
				) {
					if (window.vconsoleEvent) {
						if (window.vconsoleFlag) {
							window.vconsoleFlag = false;
							window.vconsoleEvent.hideSwitch();
						} else {
							window.vconsoleFlag = true;
							window.vconsoleEvent.showSwitch();
						}
						return;
					}
					if(this.num){
						return;
					}
					let hm = document.createElement("script");
					// hm.src = '//cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js';
					hm.src = '//cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js';
					hm.onload = function(){
						window.vconsoleEvent = new VConsole();
						window.vconsoleFlag = true;
					}
					let s = document.getElementsByTagName("script")[0];
					s.parentNode.insertBefore(hm, s);
				}
			},
			onInputKeyDown(e){
				if(e.keyCode == 13){
					this.$refs.searchInput.blur();
					this.$emit('search',this.keyword);
				};
			}
		},
		
	}
</script>

<style scoped lang="less">
.header_bar_outer{
	height: .88rem;
}
.header_bar_outer.isios {
  height: 1.16rem;
}
.header_bar_outer.isiosX {
  height: 1.64rem;
}
.header_bar_outer .header_bar{
	color: #333;
	background:#fff;
}
.header_bar_outer .header_bar_no{
	color: #333;
	background:none;
}
.header_bar_outer .header_bar2{
	color: #fff;
	background:linear-gradient(90deg,rgba(36,219,120,1) 0%,rgba(9,185,103,1) 100%);
}
.header_bar_outer .header_bar3{
	color: #fff;
	background:#11D07C;
}

.header_bar_outer .imgs_preview_bar{
	color: #fff;
	background-color: #25262d;
}
.header_bar_outer .header_bar{
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -50%;
  height: .88rem;
  width: 100%;
  color: #fff;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  box-sizing: content-box;
  z-index: 101;
  font-size: .34rem;
}
.header_bar_outer .header_bar.white{
	background: #fff;
	border-bottom:0.02rem solid rgba(238,238,238,1);
}
.header_bar_outer .header_bar .no_bottom_border{
	border-bottom: none;
}
.header_bar_outer.isios .header_bar{
	padding-top: 0.4rem;
}
.header_bar_outer.isiosX .header_bar{
	padding-top: .88rem;
}
.header_bar_outer .header_bar .header_left_tab{
	position: absolute;
	height: .88rem;
	width: 1rem;
	bottom: 0;
	left: 0rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header_bar_outer .header_bar .return_icon{
	height: 0.38rem;
	width: auto;
}
.header_bar_outer .header_bar .title-color{
	font-size: 0.32rem;
	color: #333;
}
.header_bar_outer .header_bar .search_bar{
	height: 0.64rem;
	// background-color: #FAFAFA;
	background-color: #FAFAFA;
	border-radius: 0.32rem;
	display: flex;
	align-items: center;
	flex: 1;
	padding:0 0.2rem;
	margin:0 0.5rem 0 1rem;
	.search_icon{
		width: 0.28rem;
		height: 0.28rem;
		margin-right: 0.1rem;
	}
	.close_icon{
		width: 0.28rem;
		height: 0.28rem;
		margin-left: 0.1rem;
	}
    input{
		border:none;
		background-color: #FAFAFA;
		font-size: 0.26rem;
		color: #333;
		line-height: 0.32rem;
		flex: 1;
    }

}

.header_bar_outer .header_bar.white .title-color{
	color: #313646;
}
.header_bar_outer .header_bar .titleColor{
	color: #FFFFFF;
}
.header_bar_outer .header_bar .right_area_520{
	position: absolute;
	height: .88rem;
	bottom: 0;
	display: flex;
	align-items: center;
	right: 0.46rem;
}

</style>
